<template>
    <div class="cardContainer" :style="styleContainer">
        <div class="cardTitle" :style="styleTitle">
            <slot name="card-title"></slot>
        </div>
        <div class="cardContent">
            <slot name="card-content"></slot>
        </div>
    </div>
</template>
<script>
    export default {
        props:{
            width:{
                type:String,
                default:'400px'
            },
            cardBorderColor:{
                type:String,
                default:'#0095DA'
            },
            cardTitleBg:{
                type:String,
                default:'#0095DA'
            },
            cardTitleColor:{
                type:String,
                default:'#fff'
            }
        },
        data(){
            return {
                styleContainer:{
                    width: this.width,
                    borderColor: this.cardBorderColor
                },
                styleTitle:{
                    backgroundColor: this.cardTitleBg,
                    color: this.cardTitleColor
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
.cardContainer{
    border-radius: 4px;
    border-width: 2px;
    border-style: solid;
    overflow: hidden;
    .cardTitle{
        text-indent: 1%;
        height: 50px;
        line-height: 50px;
        text-indent: 10px;
    }
}

</style>
